<template>
  <div id="role">
    <Template ref="template" name="角色" :urls="urls" :props="props" :rules="rules" :actions="actions" @per="per"
      stateProp="status" @change="$store.commit('updateState', {prop:'roles',value:null})"></Template>

    <el-dialog title="分配权限" :visible.sync="flag.per" :close-on-click-modal="false" @keydown.enter.native="setPre()">
      <el-tree ref="tree" check-strictly :data="perTree" show-checkbox node-key="id" :default-checked-keys="param.permissions"
        :props="{ children: 'children',label: 'name'}" render-after-expand @check-change="checkChange" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="flag.per = false"> 取 消 </el-button>
        <el-button type="primary" @click="setPre()"> 确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    Vue,
    Component,
    Prop,
    Watch
  } from 'vue-property-decorator';
  import Template from '@/components/template/manage.vue';

  @Component({
    components: {
      Template
    }
  })
  export default class Role extends Vue {
    urls = {
      tree: 'public/per/list',
      list: 'admin/role/list',
      save: 'admin/role/save',
      update: 'admin/role/update',
      del: 'admin/role/delete'
    };

    rules = {
      code: [{
          required: true,
          message: '请输入角色编码',
          trigger: 'blur'
        },
        {
          min: 5,
          max: 45,
          message: '角色编码长度为5-45个字符',
          trigger: 'blur'
        }
      ],
      name: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 15,
          message: '角色名称长度为2-15个字符',
          trigger: 'blur'
        }
      ],
      desc: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '备注最多可包含100个字符',
          trigger: 'blur'
        }
      ]
    };

    props = [
      {
        code: 'code',
        name: '角色编码',
        readOnly: true,
        width: 120
      }, {
        code: 'name',
        name: '角色名称',
        width: 120
      }, {
        code: 'desc',
        name: '备注',
        width: 180
      }, {
        code: 'status',
        name: '角色状态',
        dict: 'role_status',
        width: 100,
        hide: true
      },
    ]

    actions = [{
      type: 'success',
      name: '分配权限',
      width: 170,
      emit: 'per',
      url: this.urls.update
    }];

    param = {};
    perTree = [];
    flag = {
      per: false
    };

    queryPerTree() {
      const that = this
      this.$get(this.urls.tree).then(function(response) {
        if (response) {
          that.perTree = response
        } else {
          that.perTree = []
        }
      })
    }

    per(row) {
      this.param = JSON.parse(JSON.stringify(row))
      this.param.flag = true
      this.flag.per = true
      if (this.$refs.tree != null) {
        this.$refs.tree.setCheckedNodes(row.permissions)
      }
    }

    setPre() {
      const that = this
      const param = JSON.parse(JSON.stringify(that.param))
      param.permissions = that.$refs.tree.getCheckedKeys()
      this.$post(this.urls.update, param).then(function(response) {
        if (response) {
          that.$refs.template.query(1);
          that.flag.per = false
        }
      })
    }

    checkChange(data, checked) {
      const child = this.$refs.tree.getNode(data).childNodes
      if (child != null && child.length > 0) {
        for (let i = 0; i < child.length; i++) {
          child[i].checked = checked
          this.checkChange(data.children[i], checked)
        }
      }
    }


    created() {
      this.queryPerTree()
      this.$store.commit('getActionPers', 'role')
    }

    mounted() {} // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {
      this.$store.commit('getDictMap', ['role_status'])
    } // 生命周期 - 创建之前

    beforeMount() {} // 生命周期 - 挂载之前
    beforeUpdate() {} // 生命周期 - 更新之前
    updated() {} // 生命周期 - 更新之后
    beforeDestroy() {} // 生命周期 - 销毁之前
    destroyed() {} // 生命周期 - 销毁完成
    activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style>
  #role {
    padding: 20px 20px 0px 20px;
  }

  .module-row {
    background-color: #ecf5ff !important;
  }

  .group-row {
    background-color: #f0f9eb !important;
  }

  .view-row {
    background-color: oldlace !important;
  }

  .action-row {
    background-color: #c5f9e6 !important;
  }
</style>
